<template>
  <div id="app">
    <!-- 根据 showLayout 判断是否显示头部和侧边栏 -->
    <template v-if="showLayout" style="margin: 0">
      <header>
        <Header />
      </header>
      <div class="container">
        <Sidebar />
        <main style="margin:0; ">
          <router-view />
        </main>
      </div>
    </template>
    <!-- 登录页直接显示路由视图 -->
    <template v-else style="margin: 0">
      <router-view />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'

// 获取当前路由信息
const route = useRoute()

// 当路由名称不是 "login" 时显示头部和侧边栏
const showLayout = computed(() => route.name !== 'login')
</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  background-color: #f5f7fa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.container {
  display: flex;
  flex-grow: 1;
  margin: 0;
}

main {
  flex-grow: 1;
  background-color: #fff;
  margin-right: 0;
}
/* 全局链接样式 */
a {
  text-decoration: none;
  color: inherit;
}
/deep/body{
  margin: 0;
}
</style>
